<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8">
		<meta http-equiv="Access-Control-Allow-Origin" content="*">
		<meta http-equiv="content-security-policy">
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<title></title>
		<!-- build:css /css/main.css -->
		<link href="/css/mui.css" rel="stylesheet" />
		<link href="/css/iconfont.css" rel="stylesheet" />
		<link href="/css/common.css" rel="stylesheet" />
		<!-- endbuild -->
		<style>
			.goodslist{ background: #fff;}
			.mui-btn-primary{background-color: #ff5200; border-color: #ff5200;}
			.mui-btn-can{background-color: #7a7a7a; border-color: #7a7a7a;}
		</style>
	</head>

	<body>
		<header class="mui-bar mui-bar-nav u-nav">
			<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
			<h1 class="mui-title">订单详情</h1>
      <span id="to_info" class="mui-icon mui-icon-bars mui-pull-right" onclick="ssdd('#fnav')"></span>
    </header>
    <nav class="mui-bar mui-bar-tab otherNav" id="fnav">
      <a class="mui-tab-item" data-id="index.html" data-url="/index.html">
        <span class="mui-icon iconfont icon-icon-home"></span>
        <span class="mui-tab-label">首页</span>
      </a>
      <a class="mui-tab-item" data-id="category.html" data-url="/category.html">
        <span class="mui-icon iconfont icon-fenlei"></span>
        <span class="mui-tab-label">分类</span>
      </a>
      <a class="mui-tab-item" data-id="search.html" data-url="/search.html">
        <span class="mui-icon iconfont icon-fenleisousuo-home"></span>
        <span class="mui-tab-label">搜索</span>
      </a>
      <a class="mui-tab-item" data-id="cart.html" data-url="/cart.html">
        <span class="mui-icon iconfont icon-gouwuche1"></span>
        <span class="mui-tab-label">购物车</span>
      </a>
      <a class="mui-tab-item" data-id="user.html" data-url="/user/user.html">
        <span class="mui-icon iconfont icon-gerenzhongxin"></span>
        <span class="mui-tab-label">我</span>
      </a>
    </nav>
		<!--<nav class="mui-bar mui-bar-tab">
		  	<a class="zj">
		  		总价：<font id="countMoney">0.00</font>
		  		<p>共<font style="font-size:11px;" id="countMunber">1</font>件商品</p>
		  	</a>
		  	<a class="zj-btn">确定</a>
		</nav>-->
		<div class="mui-content">
			<div class="mui-scroll-wrapper">
				<div class="mui-scroll" style="padding-bottom:50px;">

					<ul class="mui-table-view goodslist" style="margin-top:50px;">
						<li class="mui-table-view-cell">
							<h4 style="text-align: center;" id="order_Stutas">订单完成</h4>
						</li>
					</ul>

					<ul class="mui-table-view goodslist addr-bg" style="margin-top:8px;" id="address">

					</ul>

					<ul class="mui-table-view product-list hot-product-list" id="orderProductList">

					</ul>

					<ul class="mui-table-view " id="collapse" style="margin-top:10px;border-top:1px solid #dbdbdb;">
						<li class="mui-table-view-cell">订单编号<span id="order_no" class="mui-badge"></span></li>
						<li class="mui-table-view-cell">配送方式<span id="shippinglists" class="mui-badge"></span></li>
						<li class="mui-table-view-cell">支付方式<span id="paylists" class="mui-badge"></span></li>
						<li class="mui-table-view-cell">订单留言<span id="postscript" class="mui-badge"></span></li>
					</ul>

					<ul class="mui-table-view " style="margin-top:10px;border-top:1px solid #dbdbdb; font-size:12px;">
						<li class="mui-table-view-cell">商品总价:<span id="formated_goods_amount" class="mui-badge red"></span></li>
						<li class="mui-table-view-cell" id="formated_tax">- 优惠:<span id="formated_tax_txt" class="mui-badge red"></span></li>
						<li class="mui-table-view-cell" id="zengzhi_tex">+ 增值税:<span id="zengzhi_tex_txt" class="mui-badge red"></span></li>
						<li class="mui-table-view-cell" id="xiaofei_tex">+ 消费税:<span id="xiaofei_tex_txt" class="mui-badge red"></span></li>
						<li class="mui-table-view-cell" id="formated_shipping_fee">+ 运费:<span id="formated_shipping_fee_txt" class="mui-badge red"></span></li>
						<li class="mui-table-view-cell">
							<p style="float: right;font-size:12px;color:#333;">支付金额:<span id="countMoney" class="mui-badge red"></span></p>
						</li>
						<li class="mui-table-view-cell">
							<p style="float: right;font-size:10px;color:#999;">下单时间:
								<font id="formated_add_time"></font>
							</p>
						</li>
					</ul>

					<div class="mui-input-row" id="pay-btn" style="margin-top: 10px;;">

					</div>
				</div>
			</div>
		</div>
		<div id="forms"></div>
		<!-- build:js /js/vendor.js -->
		<script src="/js/mui.min.js"></script>
		<!-- bower:js -->
		<script src="/bower_components/mockjs/dist/mock.js"></script>
		<script src="/bower_components/zepto/zepto.js"></script>
		<script src="/bower_components/Zepto-Cookie/zepto.cookie.js"></script>
		<!--  endbower -->
		<!-- endbuild -->
		<!-- build:js /js/main.js -->
		<script src="/js/common.js"></script>
		<script src="/js/app.js"></script>
		<!-- endbuild -->
		<script>
			var orderid = getQueryString('id');
			(function(mui, doc) {
				mui.init({
					statusBarBackground: '#ffffff',
					swipeBack: true
				});
				mui('.mui-scroll-wrapper').scroll({
					deceleration: 0.0005
				});

				function getOrderDetail() {
						$.ajax({
							url: __BATE__ + 'api/orderDetails',
							data: {order_no: orderid},
							type: 'post',
							success: function(json) {
								console.log(json)
								var html = '';
								var add = '';
								var logistics = '';
								//商品
								for(var i = 0; i < json.ret_msg.goods.length; i++) {
									html += '<li class="mui-table-view-cell mui-media ">' +
										'<a href="#">' +
										'<img class="mui-media-object mui-pull-left" src="' + json.ret_msg.goods[i].img + '">' +
										'<div class="mui-media-body">' + json.ret_msg.goods[i].goods_name + '</div>' +
										'<div class="price-position">' +
										'<span class="money">￥' + json.ret_msg.goods[i].price + '</span>' +
										'<p class="num">x' + json.ret_msg.goods[i].qty + '</p>' +
										'</div>' +
										'</a>' +
										'</li>';
									$('#orderProductList').html(html);
								}
								$('#product_data').val(JSON.stringify(json.product_data))
								//地址
								$('#product_weight').val(json.product_weight);
									add += '<a class="mui-navigate-right" style="padding-left: 32px;" >' +
										'<span class="mui-icon mui-icon-location" style="position: absolute;top: 20px;left: 6px;"></span>' +
										'<span style="font-size:13px;font-weight:600;color:#333;">收货人：<font id="addr_name">' + json.ret_msg.consignee + '</font></span> <span style="margin-left:18px;font-weight:600;" id="addr_phone">' + json.ret_msg.phone + '</span>' +
										'<p style="font-size:12px;color:#333;width: 90%;white-space: initial;">收货地址：<font id="addr_info">' + json.ret_msg.province + ' ' + json.ret_msg.city + ' ' + json.ret_msg.district + ' ' + json.ret_msg.consignee_addr + '</font></p>' +
										'</a>';
									$('#address li').html(add);
									$('#shippinglists').html(logistics);


									//订单详情
									var state=json.ret_msg.order_state;
									var btn1 = '<button id="chawuliu" class="mui-btn mui-btn-block mui-btn-can">订单跟踪</button>';
									var btn2 = '<button id="pay" class="mui-btn mui-btn-block mui-btn-primary"> 立即支付 </button>';
									var btn3 = '<button id="del" class="mui-btn mui-btn-block mui-btn-can"> 删除订单 </button>';
									switch (state){
										case 0:
										  $('#order_Stutas').html('待支付');
										  $('#pay-btn').html(btn2);
										  break;
										  case 1:
										  $('#order_Stutas').html('已支付');
										  $('#pay-btn').html(btn1);
										  break;
										  case 2:
										  $('#order_Stutas').html('已关闭');
										  $('#pay-btn').html(btn3);
										  break;
										  case 3:
										  $('#order_Stutas').html('退款处理中');
										  $('#pay-btn').html(btn1);
										  break;
										  case 4:
										  $('#order_Stutas').html('已退款');
										  $('#pay-btn').html(btn3);
										  break;
										  case 5:
										  $('#order_Stutas').html('已发货');
										  $('#pay-btn').html(btn1);
										  break;
										  case 6:
										  $('#order_Stutas').html('已完成');
										  $('#pay-btn').html(btn1);
										  break;
										}

									$('#order_no').html(json.ret_msg.source_order_no);
									$('#shippinglists').html(json.ret_msg.logistics_name);
									if(json.ret_msg.payment_mode == 1){
										$('#paylists').html('支付宝');
									}else if(json.ret_msg.payment_mode == 0){
										$('#paylists').html('微信');
									}

									$('#postscript').html(json.ret_msg.buyer_message);
									$('#formated_goods_amount').html('￥' + json.ret_msg.goods_amount);
									$('#formated_tax_txt').html('￥' + json.ret_msg.dis_amount+json.ret_msg.platform_dis_amount);
									$('#zengzhi_tex_txt').html('￥' + json.ret_msg.added_value_tax_amount);
									$('#xiaofei_tex_txt').html('￥' + json.ret_msg.consumption_duty_amount);
									$('#formated_shipping_fee_txt').html('￥' + json.ret_msg.postage);
									$('#countMoney').html('￥' + json.ret_msg.pay_amount);
									$('#formated_add_time').html(json.ret_msg.add_time);

							},
							error: function() {
								serverErr();
							}
						});
					}
					getOrderDetail()

				mui.ready(function() {


					$("body").on('tap','#pay', function() {
						$.ajax({
							url: __BATE__ + 'api/zfbPay',
							data: {order_no:orderid},
							type: 'post',
							success: function(json) {
								if(json.ret_msg == '支付宝调用成功'){
									$('#forms').html(json.html)
								}else{
									stip(json.ret_msg)
								}
							},
							error: function() {
								serverErr();
							}
					});
});


					$("body").on('tap','#del', function(e) {
						e.detail.gesture.preventDefault(); //修复iOS 8.x平台存在的bug，使用plus.nativeUI.prompt会造成输入法闪一下又没了
						var btnArray = ['否', '是'];
						mui.confirm('确认要删除此订单吗？', '', btnArray, function(e) {
							if(e.index == 1) {
								$.ajax({
									url: __BATE__ + 'api/deleteOrder',
									data: {
										order_no: orderid
									},
									type: 'post',
									success: function(json) {
										if(json.ret_msg == '删除完成') {
											openView('/user/order-list.html','order-list.html')
										} else {
											stip(json.ret_msg)
										}
									},
									error: function() {
										serverErr();
									}
								});

							}
						})
});

					$("#chawuliu").on('tap', function() {
						$.ajax({
							url: __BATE__ + 'api/zfbPay',
							data: {order_no:orderNo},
							type: 'post',
							success: function(json) {
								if(json.ret_msg == '调用成功'){
									openView('/user/order-tracking.html?id='+$(this).attr('data-id'), 'order-tracking.html')
								}
							},
							error: function() {
								serverErr();
							}
					});
});
				});
			}(mui, document));
		</script>
	</body>

</html>
